.M-hotsite {
	width: 100%;
	&Main {
		width: 100%;
	}
	&Message {
		display: none;
		position: absolute;
		line-height: 20px;
		top: 100px;
		left: 0;
		right: 0;
		text-align: center;
	}
	&Left,
	&Right {
		width: 46%;
		display: inline-block;
	}
	&Left {
		margin-right: 4%;
	}
	&Right {
		margin-left: 4%;
	}


	&Item {
		width: 100%;
		position: relative;
		font-family: 'Arial Negreta', 'Arial';
		display: inline-block;
	    font-size: 12px;
	    margin-bottom: 12px;
	    padding-left: 30px;

		&Serial {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 24px;
			text-align: right;
		}
		&Bar {
			position: relative;
			width: 100%;
			height: 100%;
		}
		&Percent {
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
			width: 0;
			z-index: 2;
			-webkit-transition: width 0.3s ease-in-out;
			-moz-transition: width 0.3s ease-in-out;
			-ms-transition: width 0.3s ease-in-out;
			transition: width 0.3s ease-in-out;
		}
		&Content {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			right: 0;
			z-index: 3;
			width: 100%;
			height: 100%;
			padding: 0 62px 0 12px;
		}
		&YValue {
			position: absolute;
			right: 12px;
			top: 0;
			bottom: 0;
			width: 50px;
			text-align: right;
		}
		&XValue {
			display: block;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-break: break-all;
		}
	}
}